<template>
	<view class="container">
        <div class="order-title">
		    <u-icon class="order-icon" name="order" color="#333" :size="36"></u-icon>
            {{title}}
        </div>
		<u-time-line>
            <!-- 已评价 -->
		    <u-time-line-item nodeTop="0">
		    	<template v-slot:node>
		    		<view class="node-icon" :class="{active: status == 4}">
		    			<u-icon name="chat-fill" color="#fff" :size="30"></u-icon>
		    		</view>
		    	</template>
		    	<template v-slot:content>
		    		<view class="order-item">
		    			<view class="order-top">
		    			    <view class="order-status">已评价</view>
		    			    <view class="order-time"></view>
                        </view>
		    			<view class="order-desc">{{status > 3 ? '用户已评价' : ''}}</view>
		    		</view>
		    	</template>
		    </u-time-line-item>
            <!-- 已完成 -->
		    <u-time-line-item nodeTop="0">
		    	<template v-slot:node>
		    		<view class="node-icon" :class="{active: status == 3, done: status > 3}">
		    			<u-icon name="pushpin-fill" color="#fff" :size="30"></u-icon>
		    		</view>
		    	</template>
		    	<template v-slot:content>
		    		<view class="order-item" :class="{done: status > 3}">
		    			<view class="order-top">
		    			    <view class="order-status">已完成</view>
		    			    <view class="order-time"></view>
                        </view>
		    			<view class="order-desc">{{status > 2 ? '用户确认完成' : ''}}</view>
		    		</view>
		    	</template>
		    </u-time-line-item>
            <!-- 服务中 -->
		    <u-time-line-item nodeTop="0">
		    	<template v-slot:node>
		    		<view class="node-icon" :class="{active: status == 2, done: status > 2}">
		    			<u-icon name="server-man" color="#fff" :size="30"></u-icon>
		    		</view>
		    	</template>
		    	<template v-slot:content>
		    		<view class="order-item" :class="{done: status > 2}">
		    			<view class="order-top">
		    			    <view class="order-status">服务中</view>
		    			    <view class="order-time"></view>
                        </view>
		    			<!-- <view class="order-desc">工号: {{}}电话确认</view> -->
		    			<view class="order-desc">{{status > 1 ? `${serviceUserName} 已电话确认` : ''}}</view>
		    		</view>
		    	</template>
		    </u-time-line-item>
            <!-- 待服务 -->
		    <u-time-line-item nodeTop="0">
		    	<template v-slot:node>
		    		<view class="node-icon" :class="{active: status == 1, done: status > 1}">
		    			<u-icon name="weixin-fill" color="#fff" :size="30"></u-icon>
		    		</view>
		    	</template>
		    	<template v-slot:content>
		    		<view class="order-item" :class="{done: status > 1}">
		    			<view class="order-top">
		    			    <view class="order-status">待服务</view>
		    			    <view class="order-time">{{payTime}}</view>
                        </view>
		    			<view class="order-desc">付款金额: {{`￥${orderPrice}`}}</view>
		    		</view>
		    	</template>
		    </u-time-line-item>
			<!-- 待派单 -->
		    <u-time-line-item nodeTop="0">
		    	<template v-slot:node>
		    		<view class="node-icon" :class="{active: status == 0, done: status > 0}">
		    			<u-icon name="hourglass-half-fill" color="#fff" :size="30"></u-icon>
		    		</view>
		    	</template>
		    	<template v-slot:content>
		    		<view class="order-item" :class="{done: status > 1}">
		    			<view class="order-top">
		    			    <view class="order-status">待派单</view>
                        </view>
		    			<view v-if="serviceUserName" class="order-desc">{{`服务人员：${serviceUserName}`}}</view>
		    		</view>
		    	</template>
		    </u-time-line-item>
	    </u-time-line>

        <u-toast ref="uToast" />
	</view>
</template>

<script>
    import Vue from 'vue';
    import { getOrderListAPI } from '../../api/order'

    const app = getApp()
	export default Vue.extend({
		data() {
			return {
                status: 1,
                title: '护工服务-养老服务',
                orderPrice: 0,
                payTime: '',
                orderTime: '',
				serviceUserName: '' // 服务人员名称
			}
		},
		onLoad(options) {
            this.status = options.orderStatus
            this.orderPrice = options.orderPrice/100
            this.title = options.orderName
            this.payTime = options.payTime // 支付时间
            this.orderTime = options.orderTime // 服务时间
            this.serviceUserName = options.serviceUserName
			console.log('this.status',this.status)
		},
		methods: {
            
		} 
	});
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

.container{
    min-height: 100vh;
    padding: 0 80rpx;
    box-sizing: border-box;
    .order-title{
        color: #272727;
        font-size: 18px;
        padding: 30rpx 0;
        margin-left: -20rpx;
        margin-bottom: 15rpx;
        .order-icon{
            margin-right: 20rpx;
        }
    }
    .node-icon{
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        text-align: center;
        background-color: #AAA;
        display: flex;
        justify-content: center;
        align-items: center;
        &.active{
            background-color: $theme-color;
        }
    }
    .order-item{
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;
        margin-bottom: 50rpx;
        .order-top{
            display: flex;
            align-items: baseline;
            margin-bottom: 5rpx;
            .order-status{
                color: #272727;
                font-size: 36rpx;
                margin-right: 20rpx;
            }
            .order-time{
                font-size: 28rpx;
                color: #707070;
            }
        }
        .order-desc{
            font-size: 32rpx;
            color: #534F4F;
        }
    }
	.done{
		&.node-icon{
			background-color: #ccc !important;
		}
		.order-status{
			color: #ccc !important;
		}
		.order-time{
			color: #ccc !important;
		}
		.order-desc{
			color: #ccc !important;
		}
	}
}
</style>
